.b_nav-bar
{
	width: 100%;
	position: relative;
	z-index: 1;

	.mobile-view
	{
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		background-image: linear-gradient(rgba(66, 66, 66, 0.8999999761581421) 0%, rgba(0, 0, 0, 0.8999999761581421) 59%);
		height: auto;
		position: relative;
		order: 0;

		.top
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			order: 0;
		}

		.wrapper
		{
			display: flex;
			padding: 30px 21px;
			justify-content: space-between;
			align-items: center;
			position: relative;
			flex: 0 0 auto;
			width: 100%;
			flex-direction: row;
			order: 0;
		}

		.logo
		{
			height: 44px;
			padding-right: 2px;
			aspect-ratio: 146 / 44;
			position: relative;
			flex: 0 0 146px;
			object-fit: fill;
			order: 0;
		}

		.close-button, .menu-button
		{
			height: 32.226px;
			position: relative;
			flex: 0 0 44px;
			order: 1;
		}

		.icon-close, .icon-menu
		{
			display: flex;
			flex-direction: column;
			width: 44px;
			justify-content: center;
			align-items: center;
			gap: 14px;
			height: auto;
			position: absolute;
			left: 0px;
			top: 0px;
			object-fit: cover;
			order: 0;
		}

		&[data-state="default"]
		{
			.close-button { display: none !important; }
		}
		&[data-state="expanded"]
		{
			.menu-button { display: none !important; }
		}

		.line
		{
			width: 100%;
			position: relative;
			flex: 0 0 0px;
			height: 0px;
			object-fit: cover;
			order: 1;
		}

		.bottom
		{
			display: flex;
			flex-direction: column;
			padding-bottom: 30px;
			align-items: center;
			gap: 30px;
			position: relative;
			flex: 0 0 auto;
			order: 1;
			width: calc(100% - 38px);
		}

		.mobile-links
		{
			width: 100%;
			position: relative;
			flex: 0 0 146px;
			order: 0;
		}

		.mobile-link
		{
			display: flex;
			flex-direction: column;
			padding-top: 30px;
			align-items: center;
			gap: 30px;
			width: auto;
			height: auto;
			position: relative;
		}

		.nav-link
		{
			display: flex;
			flex-direction: column;
			height: 18px;
			justify-content: center;
			align-items: center;
			gap: 4px;
			order: 0;
		}

		.text-1
		{
			color: #FFF;
			font-family: "instrument sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			position: relative;
			flex: 0 0 auto;
			order: 0;
		}

		.line-2
		{
			width: 100%;
			position: relative;
			flex: 0 0 0px;
			height: 0px;
			object-fit: cover;
			order: 1;
		}

		.nav-link:hover
		{
			.text-1
			{
				text-decoration: underline;
			}
		}

		.mobile-link.has-sub-menu
		{
	
			.nav-link
			{
				height: auto;
			}

			.text-1
			{
				display: flex;
				align-items: center;
				gap: 6px;
			}

			.arrow-down
			{
				transform: rotate(-90deg);
				transition: transform 0.25s ease;
			}

	

			.sub-menu
			{
				display: none;
				width: 100%;
	
				.sub-menu-content
				{
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 50px;

					.sub-menu-link
					{
						text-decoration: none;
					}

					.text-16
					{
						color: #FFF;
						font-family: "Instrument Sans";
						font-style: normal;
						font-size: 18px;
						font-weight: 600;
						line-height: 20px;
					}

					.line-16
					{
						display: none;
					}
				}
			}

			&.is-open
			{
				gap: 50px;

				.arrow-down
				{
					transform: rotate(0deg);
				}

				.sub-menu
				{
					display: block;
				}
			}
		}

		/* .divider
		{
			width: 340px;
			position: relative;
			flex: 0 0 0px;
			height: 0px;
			object-fit: cover;
			order: 1;
		} */

		.divider
		{
			width:100%;
			height: 2px;
			position: relative;
			order: 1;
			background-color: #818181;
		}

		.mobile-link-2
		{
			display: flex;
			flex-direction: column;
			padding-top: 30px;
			align-items: center;
			gap: 30px;
			width: auto;
			height: auto;
			position: absolute;
			left: 0px;
			top: 73px;
			order: 1;
		}

		.inline-icon-button
		{
			display: flex;
			align-items: center;
			position: relative;
			flex: 0 0 auto;
			flex-direction: row;
			order: 1;
		}

		.content
		{
			display: flex;
			height: 50px;
			padding: 10px 10px 10px 30px;
			justify-content: center;
			align-items: center;
			gap: 2px;
			border-top: 2px solid var(--Colors-Neutrals-Gray, #818181);
			border-bottom: 2px solid var(--Colors-Neutrals-Gray, #818181);
			border-left: 2px solid var(--Colors-Neutrals-Gray, #818181);
			background-color: rgba(255, 255, 255, 0);
			position: relative;
			flex: 0 0 auto;
			flex-direction: row;
			order: 0;
		}

		.example-cta
		{
			color: var(--Neutrals-White, #FFF);
			font-family: "instrument sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			position: relative;
			flex: 0 0 auto;
			order: 0;
		}

		badge-icon
		{
			display: flex;
			flex-direction: column;
			height: 30px;
			justify-content: center;
			align-items: center;
			overflow: clip;
			background-color: rgba(255, 255, 255, 0);
			position: relative;
			flex: 0 0 30px;
			order: 1;

			.icon-dollar-smal
			{
				width: 11.354px;
				aspect-ratio: 11 / 20;
				position: relative;
				flex: 0 0 20px;
				object-fit: fill;
				order: 0;
			}
		}

		badge-icon[data-icon="lightbulb"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="team"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="stories"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="arrow right"]
		{
			flex-shrink: initial;
		}

		badge-icon[data-icon="lightbulb"] .icon-dollar-small
		{
			display: none;
		}

		badge-icon[data-icon="team"] .icon-dollar-small
		{
			display: none;
		}

		badge-icon[data-icon="stories"] .icon-dollar-small
		{
			display: none;
		}

		badge-icon[data-icon="arrow right"] .icon-dollar-small
		{
			display: none;
		}

		.endcap
		{
			position: relative;
			flex: 0 0 12px;
			width: 12px;
			height: 50px;
			object-fit: cover;
			order: 1;
		}

		.endcap.hover
		{
			display: none;
		}

		.inline-icon-button:hover
		{
			filter: drop-shadow(0 4px 0 var(--Neutrals-Gray, #818181));

			.content
			{
				background-color: var(--Neutrals-White, #FFF);
				border-top: 2px solid var(--Neutrals-White, #FFF);
				border-bottom: 2px solid var(--Neutrals-White, #FFF);
				border-left: 2px solid var(--Neutrals-White, #FFF);

				.example-cta
				{
					color: var(--Neutrals-Black, #000);
				}
			}

			.endcap
			{
				display: none;
			}

			.endcap.hover
			{
				display: block;
			}
		}

		&[data-state="default"] .close-button
		{
			display: none;
		}

		&[data-state="default"] .bottom
		{
			display: none;
		}

	}

	.desktop-view
	{
		display: none;

		.shared-style-main
		{
			display: flex;
			height: 50px;
			justify-content: flex-end;
			align-items: center;
			gap: 44px;
			position: relative;
			flex: 0 0 auto;
			order: 0;
		}

		.shared-set-badge-icon
		{

			.icon-dollar-small-12
			{
				width: 11.354px;
				position: relative;
				flex: 0 0 20.09px;
				flex-shrink: 0;
				object-fit: contain;
				aspect-ratio: 11 / 20;
				order: 0;
			}

			.icon-bulb-3
			{
				width: 18px;
				position: relative;
				flex: 0 0 20.224px;
				flex-shrink: 0;
				object-fit: fill;
				order: 0;
			}

			.icon-team-3
			{
				width: 26px;
				position: relative;
				flex: 0 0 14.865px;
				flex-shrink: 0;
				object-fit: fill;
				order: 0;
			}

			.icon-stories-3
			{
				display: flex;
				position: relative;
				flex: 0 0 auto;
				object-fit: fill;
				width: auto;
				order: 0;
			}

			.icon-arrow-right-8
			{
				width: 10px;
				position: relative;
				flex: 0 0 17px;
				flex-shrink: 0;
				overflow: clip;
				object-fit: fill;
				order: 0;
			}

			&[data-icon="dollar sign"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="dollar sign"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="dollar sign"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="dollar sign"] .icon-stories-3
			{
				display: none;
			}

			&[data-icon="dollar sign"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="lightbulb"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="lightbulb"] .icon-dollar-small-12
			{
				width: 18px;
				flex: 0 0 20.224px;
				object-fit: fill;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-lightbulb.svg");
			}

			&[data-icon="lightbulb"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="lightbulb"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="lightbulb"] .icon-stories-3
			{
				display: none;
			}

			&[data-icon="lightbulb"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="team"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="team"] .icon-dollar-small-12
			{
				width: 26px;
				flex: 0 0 14.865px;
				object-fit: fill;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-team.svg");
			}

			&[data-icon="team"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="team"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="team"] .icon-stories-3
			{
				display: none;
			}

			&[data-icon="team"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="stories"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="stories"] .icon-dollar-small-12
			{
				display: flex;
				flex: 0 0 auto;
				object-fit: fill;
				width: auto;
				flex-shrink: initial;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-stories.svg");
			}

			&[data-icon="stories"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="stories"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="stories"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="stories"] .icon-arrow-right-8
			{
				display: none;
			}

			&[data-icon="arrow right"]
			{
				display: flex;
				flex-direction: column;
				width: 30px;
				height: 30px;
				justify-content: center;
				align-items: center;
				overflow: clip;
				background-color: #FFF;
			}

			&[data-icon="arrow right"] .icon-dollar-small-12
			{
				width: 10px;
				flex: 0 0 17px;
				overflow: clip;
				object-fit: fill;
				aspect-ratio: initial;
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/icon-dollar-small-3-arrow right.svg");
			}

			&[data-icon="arrow right"] .icon-dollar-small-12
			{
				display: none;
			}

			&[data-icon="arrow right"] .icon-bulb-3
			{
				display: none;
			}

			&[data-icon="arrow right"] .icon-team-3
			{
				display: none;
			}

			&[data-icon="arrow right"] .icon-stories-3
			{
				display: none;
			}
		}

		.shared-set-inline-icon
		{
			display: flex;
			align-items: center;

			.content-4
			{
				display: flex;
				height: 50px;
				padding: 10px 10px 10px 30px;
				justify-content: center;
				align-items: center;
				gap: 2px;
				position: relative;
				flex: 0 0 auto;
				border-top: 2px solid #818181;
				border-bottom: 2px solid #818181;
				border-left: 2px solid #818181;
				order: 0;
			}

			span.example-cta-4
			{
				color: #FFF;
				font-family: "Instrument Sans";
				font-style: normal;
				font-size: 18px;
				font-weight: 600;
				line-height: 20px /* 111% */;
				order: 0;
			}

			.badge-icon-4
			{
				position: relative;
				flex: 0 0 30px;
				flex-shrink: 0;
				order: 1;
				background-color: initial;
			}

			.endcap-5
			{
				height: 100%;
				position: relative;
				flex: 0 0 12px;
				flex-shrink: 0;
				object-fit: fill;
				order: 1;
				width: 100%;
			}

			&:hover
			{
				filter: drop-shadow(0 4px 0 rgba(129, 129, 129, 1));
			}

			&:hover .content-4
			{
				background-color: #FFF;
				border-top: 2px solid #FFF;
				border-bottom: 2px solid #FFF;
				border-left: 2px solid #FFF;
			}

			&:hover .example-cta-4
			{
				color: #000;
			}

			&:hover .endcap-5
			{
				content: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/endcap-2-hover.svg");
			}
		}

		.shared-set-nav
		{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4px;

			.text-15
			{
				color: #FFF;
				font-family: "Instrument Sans";
				font-style: normal;
				font-size: 18px;
				font-weight: 600;
				line-height: 20px /* 111% */;
				order: 0;
				position: relative;
				z-index: 2;
			}

			&:hover .text-15
			{
				align-self: stretch;
			}

			&:hover .line-15
			{
				width: 100%;
				height: 1px;
				background-color: #FFF;
				order: 1;
			}
		}

		.shared-set-nav-section-icon
		{
			display: flex;
			align-items: center;
			gap: 6px;

			.top-4
			{
				display: flex;
				align-items: center;
				gap: 6px;
				position: relative;
				flex: 0 0 auto;
				order: 0;
			}

			.nav-link-2
			{
				height: 13px;
				position: relative;
				flex: 0 0 auto;
				order: 0;
			}

			.icon-arrow-right-4
			{
				transform: rotate(90deg);
				height: 17px;
				position: relative;
				flex: 0 0 17px;
				overflow: clip;
				object-fit: fill;
				order: 1;
			}

			&:hover
			{
				flex-direction: column;
				align-items: flex-start;
				gap: 50px;
			}

			&:hover .icon-arrow-right-4
			{
				transform: rotate(-90deg);
			}

			&:hover .nav-sub-menu-2
			{
				display: flex;
				flex-direction: column;
				padding: 30px;
				align-items: flex-start;
				gap: 30px;
				position: relative;
				flex: 0 0 auto;
				background-image: linear-gradient(rgba(0, 0, 0, 0.8999999761581421) 41%, rgba(66, 66, 66, 0.8999999761581421) 100%);
				backdrop-filter: blur(20px);
				order: 1;
			}

			&:hover .divider-3
			{
				width: 100%;
				height: 2px;
				background-color: #818181;
				order: 1;
			}

			&:hover .divider-3
			{
				width: 100%;
				height: 2px;
				background-color: #818181;
				order: 3;
			}

			&:hover .nav-link-4
			{
				color: #FFF;
				font-family: "Instrument Sans";
				font-style: normal;
				font-size: 18px;
				font-weight: 600;
				line-height: 20px /* 111% */;
				order: 4;
			}
		}

		.shared-comp-icon-dollar-small
		{
			object-fit: contain;
			aspect-ratio: 11 / 20;
		}

		.shared-comp-icon-arrow-right
		{
			overflow: clip;
			object-fit: fill;
		}

		.shared-comp-all-things-metal-log
		{
			overflow: clip;
			object-fit: fill;
		}

		.wrapper
		{
			display: flex;
			padding: 23px 59px;
			justify-content: space-between;
			align-items: center;
			position: relative;
			flex: 0 0 114px;
			width: 100%;
			background-image: linear-gradient(rgba(66, 66, 66, 0.8999999761581421) 0%, rgba(0, 0, 0, 0.8999999761581421) 76%);
			backdrop-filter: blur(20px);
			order: 0;
		}

		.logo
		{
			height: 68px;
			position: relative;
			flex: 0 0 226px;
			order: 0;
		}

		.main
		{
			order: 1;
		}

		.nav-links
		{
			height: 13px;
			align-items: flex-start;
		}

		.nav-2
		{
			position: relative;
			flex: 0 0 auto;
			order: 1;
		}

		.nav-3
		{
			position: relative;
			flex: 0 0 auto;
			order: 2;
		}

		.nav-4
		{
			position: relative;
			flex: 0 0 auto;
			order: 3;
		}

		.nav-5
		{
			position: relative;
			flex: 0 0 auto;
			order: 4;
		}

		.nav-6
		{
			position: relative;
			flex: 0 0 auto;
			order: 5;
		}

		.inline-icon
		{
			position: relative;
			flex: 0 0 auto;
			order: 1;
		}

		.line-7
		{
			width: 100%;
			height: 2px;
			background-color: #818181;
			order: 1;
		}

	}

	.mobile-view
	{
		.sub-menu 
		{		
			.sub-menu-content 
			{
				color: #FFF;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 30px;
			}
		}
	}

	@media (min-width: 1440px)
	{
		.mobile-view { display: none; }
		.desktop-view
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;

			.has-sub-menu
			{				
				padding-right: 25px;
				position: relative;

				.arrow-down
				{
					position: absolute;
					right: 0px;
					top: 50%;
					transform: translateY(-50%);
					transition: transform 0.3s ease;
				}

				&:hover .arrow-down,
				&.show .arrow-down
				{
					/* transform: translateY(-25%); */
					transform: translateY(-50%) rotate(180deg);
				}

				
				&:hover,
				&.show 
				{
					.sub-menu 
					{
						display: block;
					}
				}
			}

		}

		.sub-menu 
		{		
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			padding-top: 65px;
			z-index: 1;

			.sub-menu-content 
			{
				color: #FFF;
				background: linear-gradient(180deg, rgba(66, 66, 66, 0.90) 0%, rgba(0, 0, 0, 0.90) 76%);
				backdrop-filter: blur(10px);
				display: flex;
				padding: 30px;
				flex-direction: column;
				align-items: flex-start;
				gap: 0;
				white-space: nowrap;

				.sub-menu-link
				{
					display: flex;
					width: 100%;
					padding-bottom: 30px;
					flex-direction: column;
					align-items: flex-start;
					gap: 30px;
					text-decoration: none;
				}

				.sub-menu-link:last-child
				{
					padding-bottom: 0;
				}

				.sub-menu-link:last-child .line-16
				{
					display: none;
				}

				.text-16
				{
					color: #FFF;
					font-family: "Instrument Sans";
					font-size: 18px;
					font-style: normal;
					font-weight: 600;
					line-height: 20px;
				}

				.line-16
				{
					width: 100%;
					height: 2px;
					background-color: #818181;
				}
			}
		}
	}

	.shared-set-cta
	{
		display: flex;
		padding: 10px 22px 10px 32px;
		justify-content: center;
		align-items: center;
		border-image-source: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/shape-bg-slice-5-20-20-5-default.svg");
		border-image-slice: 5 20 20 5 fill;
		border-image-width: 5px 20px 20px 5px;
		border-image-repeat: stretch;

		span.title
		{
			color: #FFF;
			font-family: "Instrument Sans";
			font-style: normal;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px /* 111% */;
			order: 0;
		}

		.icon-wrapper
		{
			display: flex;
			flex-direction: column;
			height: 30px;
			justify-content: center;
			align-items: center;
			position: relative;
			flex: 0 0 30px;
			flex-shrink: 0;
			overflow: clip;
			order: 1;
		}

		.arrow-right
		{
			width: 10px;
			position: relative;
			flex: 0 0 17px;
			flex-shrink: 0;
			overflow: clip;
			object-fit: fill;
			order: 0;
		}

		&:hover
		{
			border-image-source: url("/wp-content/acftb-content/acftb-blocks/Main Site Nav/images/shape-bg-slice-5-20-20-5-hover.svg");
			filter: drop-shadow(0 4px 0 rgba(129, 129, 129, 1));
		}

		&:hover .title
		{
			color: #000;
		}

		.shared-comp-icon-arrow-right
		{
			overflow: clip;
			object-fit: fill;
		}

		.cta
		{
			position: absolute;
			left: 34px;
			top: 45px;
			order: 0;
		}
	}
}